<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px" label-position="top">
      <div class="section back-fff">
        <div class="title">Change Password</div>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="Current Password" prop="F_Password" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
              <el-input type="password" show-password v-model="form.F_Password" placeholder="Current Password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="New Password" prop="NewF_Password1" :rules="{ required: true,  trigger: 'blur',validator: validatePass}">
              <el-input type="password" show-password v-model="form.NewF_Password1" placeholder="New Password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="Confirm Password" prop="NewF_Password" :rules="{ required: true,  trigger: 'blur',validator: validatePass2}">
              <el-input type="password" show-password v-model="form.NewF_Password" placeholder="Confirm Password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="section-add back-fff">
        <el-button type="primary" @click="submit" :loading="loading">Save Changes</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { ResetPwdApi } from "@/api/user";
export default {
  data() {
    return {
      form: {},
      validatePass(rule, value, callback) {
        if (!value) {
          return callback(new Error("Please input a password"));
        }
        if (value.length < 6) {
          return callback(
            new Error("The password shall not be less than 6 digits")
          );
        }
        if (value.length > 16) {
          return callback(
            new Error("The password must not be more than 16 characters")
          );
        }
        callback();
      },
      validatePass2: (rule, value, callback) => {
        if (!value) {
          callback(new Error("Please enter the password again"));
        } else if (value !== this.form.NewF_Password1) {
          callback(new Error("The two passwords are inconsistent!"));
        } else {
          callback();
        }
      },
      loading: false,
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return false;

        if (
          //密码不能小于8位数
          this.form.NewF_Password1.length < 8 ||
          //大于16位
          this.form.NewF_Password1.length > 16 ||
          //不能是纯数字，必须有字母或者其他常用符号
          /^\d{1,}$/.test(this.form.NewF_Password1)
        ) {
          return this.$message.warning({
            message:
              "Set password lenght 8 - 16 characters, min 1 Letter or 1 special character and only contains symbols from the alphabet, numbers and chosen special characters.",
          });
        }
        if (this.form.NewF_Password1 !== this.form.NewF_Password) {
          return this.$message.warning({
            message: "The two passwords are inconsistent",
          });
        }

        this.loading = true;
        ResetPwdApi({
          F_UserId: this.$store.state.user.F_UserId,
          F_Password: this.form.F_Password,
          NewF_Password: this.form.NewF_Password,
        })
          .then(() => {
            this.loading = false;
            this.$message.success({ message: "Modified successfully" });

            this.$router.replace({ path: "/login" });
          })
          .catch(() => (this.loading = false));
      });
    },
  },
};
</script>
<style scoped lang="scss">
.title {
  font-size: 16px;
  line-height: 50px;
  border-left: 6px solid #2d9ef3;
  padding-left: 21px;
  margin-left: -39px;
}
.section {
  padding-left: 39px;
  padding-right: 20px;
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.section-add {
  padding: 20px;
}
.el-form-item {
  height: 93px;
}
</style>